<!DOCTYPE HTML>
<html>

<head>
    <title> 商品档案列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="container">
    <div class="detail-page">
        <div class="detail-page-title">
            <h4>商品档案列表
                <button type="button" id="exportGoods" class="ml-10 pull-right jx-btn btn-default">导出商品</button>
                <button type="button" id="exportGoodsInfoMB" class="ml-10 pull-right jx-btn btn-default">导入商品模板下载
                </button>

            </h4>
        </div>
        <div class="jx-search-container">
            <form id="searchForm" class="jx-form form-horizontal jx-form-thin" method="post">
                <div class="row">
                    <div class="control-group span7">
                        <label class="control-label">商品货号：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="code" id="goodsCode">
                        </div>
                    </div>
                    <div class="control-group span7">
                        <label class="control-label">商品品牌：</label>
                        <div class="controls">
                            <select id="selectGoodsBrandId" name="brandId">
                            </select>
                        </div>
                    </div>
                    <div class="control-group span7">
                        <label class="control-label">商品名称：</label>
                        <div class="controls">
                            <input type="text" class=" control-text" name="name" id="goodsName">
                        </div>
                    </div>

                    <div class="span2 pull-right">

                        <button type="submit" id="btnSearch" class="jx-btn btn-default">搜索</button>

                    </div>
                </div>
                <div class="row">
                    <div class="control-group span7">
                        <label class="control-label">状态：</label>
                        <div class="controls">
                            <select  id="goodsStatus" name="goodsStatus">
                                <option value="">全部</option>
                                <option value="1">上架</option>
                                <option value="0">下架</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group span7">
                        <label class="control-label">性别：</label>
                        <div class="controls">
                            <select  id="goodsSex" name="sex">
                                <option value="">全部</option>
                                <option value="1">男款</option>
                                <option value="2">女款</option>
                                <option value="3">中性</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-group span7">
                        <label class="control-label">颜色：</label>
                        <div class="controls">
                            <!--                                 <input type="text" class=" control-text" name="color"> -->
                            <select  id="selectGoodsColorId" name="color">
                            </select>
                        </div>
                    </div>

                </div>
                <div class="row">

                    <div class="control-group span7">
                        <label class="control-label first">上市年份：</label>
                        <div class="controls">
                            <input type="text" class=" control-text" name="year" id="goodsYear">
                        </div>
                    </div>

                    <div class="control-group span5">
                        <label class="control-label">穿着人群：</label>
                        <div class="controls">
                            <select class="input-small" name="goodsType" id="goodsType">
                                <option value="">全部</option>
                                <option value="1">成人</option>
                                <option value="2">儿童</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group span6">
                        <label class="control-label">季节：</label>
                        <div class="controls">
                            <select  class="input-medium" name="season" id="goodsSeason">
                                <option value="">全部</option>
                                <option value="1">Q1(春季)</option>
                                <option value="2">Q2(夏季)</option>
                                <option value="3">Q3(秋季)</option>
                                <option value="4">Q4(冬季)</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group span6">
                        <label class="control-label">促销类型：</label>
                        <div class="controls">
                            <select  class="input-medium" name="salesType" id="salesType">
                                <option value="">全部</option>
                                <option value="2">上新款</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group  span8">
                        <label class="control-label first">一级分类：</label>
                        <div class="controls">
                            <!--                             	<div id="selectFirstTypeId"> -->
                            <!-- 				                  	<input type="hidden" name="oneTypeId" id="parentId" > -->
                            <!-- 				                </div> -->
                            <select id="selectFirstTypeId" name="oneTypeId" style="width:100px">
                            </select>
                            <span class="ml-10">(等同品类)</span>
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">二级分类：</label>
                        <div class="controls">
                            <!--                             	<div id="selectSecondTypeId"> -->
                            <!-- 				                     <input type="hidden" name="twoTypeId" id="sonId"> -->
                            <!-- 				                </div> -->
                            <select id="selectSecondTypeId" name="twoTypeId" style="width:100px">
                            </select>
                            <span>(等同项目)</span>
                        </div>
                    </div>

                    <div class="control-group span11">
                        <label class="control-label">标准零售价 ：</label>
                        <div class="controls">
                            <input class="input-small" type="text"  name="beginGoodsPrice" id="beginGoodsPrice"><span>&nbsp;-&nbsp;</span>
                            <input class="input-small" type="text"  name="endGoodsPrice" id="endGoodsPrice"><span>&nbsp;&nbsp;元 </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span11">
                        <label class="control-label">修改时间 ：</label>
                        <div class="controls">
                            <input class="calendar calendar-time" type="text"  name="startTime" id="startTime"><span> &nbsp;-&nbsp; </span>
                            <input class="calendar calendar-time" type="text"  name="endTime" id="endTime">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">商品图片：</label>
                        <div class="controls">
                            <select id="goodsImg" name="goodsImg" style="width:100px">
                                <option value="">全部</option>
                                <option value="yes">有</option>
                                <option value="no">无</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group  span7">
                        <label class="control-label first">系列：</label>
                        <div class="controls">

                            <select id="" name="" class="input-medium">
                                <option value="">全部</option>
                            </select>

                        </div>
                    </div>
                    <div class="control-group  span7">
                        <label class="control-label first">商品等级：</label>
                        <div class="controls">
                            <select id="" name="" class="input-medium">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>

                </div>
            </form>
            <div class="jx-search-bar-bottom">
                <form  id="form1"  method="post" enctype="multipart/form-data">
                    <div class="row">

                        <button type="button" id="add-info-btn" class="ml-10 jx-btn btn-default">添加商品</button>


                        <input name="fileImg"    id="fileImg" type="file"   style="margin-left: 100px; display: none;" >
                        <button type="button" id="importImg" class="ml-10 jx-btn btn-positive">批量导入图片</button>


                        <input name="file"    id="file" type="file"   style="margin-left: 100px; display: none;" >
                        <button type="button"  id="import" class="ml-10 jx-btn btn-warning">批量导入商品</button>

                    </div>
                </form>
            </div>

        </div>

        <div class="search-grid-container">
            <div id="grid"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<!-- script start -->
<script type="text/javascript">
    $("#add-info-btn").click(function () {
        top.topManager.openPage({
            id: 'add-info',
            href: 'templates/product/product-list/product-add-info.html',
            title: '添加商品信息'
        });
    });
    BUI.use(['bui/grid', 'bui/data', 'common/search'], function (Grid, Data, Search) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '商品货号',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 200
            }, {
                title: '商品品牌',
                dataIndex: 'b',
                elCls: 'center', //居中
                width: 200
            }, {
                title: '商品名称',
                elCls: 'center',
                dataIndex: 'c',
                width: 300
            }, {
                title: '品类',
                elCls: 'center',
                dataIndex: 'd',
                width: 200
            }, {
                title: '项目',
                elCls: 'center',
                dataIndex: 'e',
                width: 200
            }, {
                title: '穿着人群',
                elCls: 'center',
                dataIndex: 'f',
                width: 200
            }, {
                title: '性别',
                elCls: 'center',
                dataIndex: 'h',
                width: 200
            }, {

                title: '上市年份',
                elCls: 'center',
                dataIndex: 'g',
                width: 200
            }, {

                title: '季节',
                elCls: 'center',
                dataIndex: 'i',
                width: 150
            }, {

                title: '颜色',
                elCls: 'center',
                dataIndex: 'j',
                width: 150
            }, {

                title: '标准零售价',
                elCls: 'center',
                dataIndex: 'k',
                width: 200
            }, {

                title: '激想价',
                elCls: 'center',
                dataIndex: 'l',
                width: 200
            }, {

                title: '会员采购价',
                elCls: 'center',
                dataIndex: 'm',
                width: 200
            }, {

                title: '标签',
                elCls: 'center',
                dataIndex: 'n',
                width: 200
            }, {

                title: '状态',
                elCls: 'center',
                dataIndex: 'o',
                width: 200
            }, {
                title: '操作',
                elCls: 'center',
                dataIndex: 'p',
                width: 300,
                renderer: function (value, obj) {
                    var editStr = Search.createLink({ //链接使用 此方式
                            id: 'edit' + obj.id,
                            title: '编辑商品信息',
                            text: '[ 编辑 ] ',
                            href: 'templates/product/product-list/product-add-info.html'
                        }),
                        offStr = '<span class="grid-command btn-off-sale">[ 下架 ]</span>'; //页面操作不需要使用Search.createLink
                    return offStr + editStr;
                }
            }],
            data = [{
                id: 1,
                a: 'Adidas',
                b: '服饰',
                c: 'ESSENTIAL STAR 2',
                d: '鞋子',
                e: '训练鞋',
                f: '成人',
                g: '2015',
                h: '男款',
                i: 'Q4(冬季)',
                j: '／',
                k: ' 453.00',
                l: '453.00',
                m: '453.00',
                n: '普通',
                o: '上架'

            }, {
                id: 2,
                a: 'Adidas',
                b: '服饰',
                c: 'ESSENTIAL STAR 2',
                d: '鞋子',
                e: '训练鞋',
                f: '成人',
                g: '2015',
                h: '男款',
                i: 'Q4(冬季)',
                j: '／',
                k: ' 453.00',
                l: '453.00',
                m: '453.00',
                n: '普通',
                o: '上架'

            }];

        //初始化数据
        var store = new Store({ //初始化数据
                data: data,
                autoLoad: true, //自动加载数据
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层
                forceFit: true,
                tbar: { //添加、删除
                    elCls: 'pull-right',
                    items: [{
                        btnCls: 'button button-small',
                        text: '选中上架',
                        listeners: {
                            'click': onSaleFunction
                        }
                    }, {
                        btnCls: 'button button-small',
                        text: '选中下架',
                        listeners: {
                            'click': offSaleFunction
                        }
                    }]
                },
                // 底部工具栏
                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                plugins: [Grid.Plugins.CheckSelection], //插件
                store: store
            });

        grid.render();

        //点击操作
        grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
                itemEl = $(ev.element),
                item = ev.item;

            if (sender.hasClass('btn-off-sale')) { //点击下架操作
                offSaleFunction(item, itemEl);

            }
        });

        //上架选中的记录
        function onSaleFunction(item, itemEl) {
            BUI.Message.Confirm('确认上架？', function () {

            }, 'question');
        }

        //下架选中的记录
        function offSaleFunction(item, itemEl) {
            BUI.Message.Confirm('确认下架？', function () {

            }, 'question');
        }

    });
</script>
<!-- script end -->

<body>

</html>
